<template>
    <span>
        <Button type="primary" size="small" @click="handleBatchAlarmPlanAddShow">批量添加告警计划</Button>
        <Modal v-model="batch_alarm_plan_add_modal" title="批量添加告警计划" width="75" :mask-closable="false">
            <Form :model="alarm_plan_current" :label-width="100">
                <FormItem label="设备ID">
                    <template v-for="row in selected_clients" :key="row.client_id">
                        <ClientTag :client_id="row.client_id" />
                    </template>
                </FormItem>
                <FormItem label="计划名称">
                    <Input v-model="alarm_plan_current.plan_name"></Input>
                </FormItem>
                <FormItem label="最大允许断网时间(秒)">
                    <Input v-model="alarm_plan_current.plan_maxtime" style="width: 200px"></Input>
                    <p style="color:#aaa;">单位为秒，不低于30，如果为 0 则表示不进行断网时间告警</p>
                </FormItem>
                <FormItem label="最大断网次数">
                    <Input v-model="alarm_plan_current.plan_maxcount" style="width: 200px"></Input>
                    <p style="color:#aaa;">如果为 0 则表示不进行断网次数告警</p>
                </FormItem>
                <FormItem label="断网次数的时间范围(秒)">
                    <Input v-model="alarm_plan_current.plan_rangetime" style="width: 200px"></Input>
                    <p style="color:#aaa;">单位为秒，不低于 30。在此限定时间范围内容达到最大断网次数则告警</p>
                </FormItem>
                <FormItem label="生效时段">
                    <time-picker confirm type="timerange" format="HH:mm" v-model="alarm_plan_current.plan_time" style="width: 200px"></time-picker>
                    <p style="color:#aaa;">默认为全天</p>
                </FormItem>
                <FormItem label="告警消息模板">
                    <Input v-model="alarm_plan_current.plan_template" type="textarea" :autosize="{minRows: 1,maxRows: 5}"></Input>
                    <p style="color:#aaa;">
                        <AlarmTemplateTestButton :alarm_plan="alarm_plan_current"></AlarmTemplateTestButton>
                        <AlarmTemplateHelpButton style="float:right;"></AlarmTemplateHelpButton>
                    </p>
                </FormItem>
                <FormItem label="启用项">
                    <span style="margin-right:5px;">立即生效</span>
                    <Switch v-model="alarm_plan_current.plan_enable" size="small" style="margin-right: 15px;"></Switch>
                    <span style="margin-right:5px;">邮件通知</span>
                    <Switch v-model="alarm_plan_current.plan_email" size="small" style="margin-right: 15px;"></Switch>
                    <span style="margin-right:5px;">短信通知</span>
                    <Switch v-model="alarm_plan_current.plan_sms" size="small"></Switch>
                </FormItem>
            </Form>
            <template #footer>
            <Button type="primary" @click="handleAlarmPlanBatchAddOk">确定</Button>
            <Button type="text" @click="handleAlarmPlanAddBatchCancel">取消</Button>
            </template>
        </Modal>
    </span>
</template>

<script>
import AlarmTemplateHelpButton from './AlarmTemplateHelpButton.vue';
import AlarmTemplateTestButton from './AlarmTemplateTestButton.vue';
import ClientTag from './ClientTag.vue';

export default {
    name: 'AlarmPlanBatchAddButton',
    components: {
        AlarmTemplateHelpButton,
        AlarmTemplateTestButton,
        ClientTag
    },
    props: {
        clients: Array
    },
    data () {
        return {
            batch_alarm_plan_add_modal: false,
            alarm_plan_current: {
                plan_name: '',
                plan_email: false,
                plan_sms: false,
                plan_enable: false,
                plan_maxtime: 30,
                plan_maxcount: 0,
                plan_rangetime: 30,
                plan_time: ['', ''],
                plan_template: ''
            },
            alarm_plan_template_help_modal: false,
            selected_clients: []
        }
    },
    methods: {
        handleBatchAlarmPlanAddShow() {
            this.selected_clients = this.clients;
            if (this.selected_clients.length == 0) {
                this.errorMessage('请选择客户端');
                return;
            }
            let client_ids = [];
            for (let i = 0; i < this.selected_clients.length; i++) {
                client_ids.push(this.selected_clients[i].client_id);
            }
            this.alarm_plan_current.plan_name = '';
            this.alarm_plan_current.plan_email = false;
            this.alarm_plan_current.plan_sms = false;
            this.alarm_plan_current.plan_enable = false;
            this.alarm_plan_current.plan_maxtime = 30;
            this.alarm_plan_current.plan_maxcount = 0;
            this.alarm_plan_current.plan_rangetime = 30;
            this.alarm_plan_current.plan_time = ['', ''];
            this.alarm_plan_current.plan_template = '';
            this.batch_alarm_plan_add_modal = true;
        },
        handleAlarmPlanBatchAddOk() {
            let plan_name = this.alarm_plan_current.plan_name;
            if (plan_name === '') {
                this.errorMessage('计划名称不能为空');
                return;
            }
            let plan_maxtime = this.alarm_plan_current.plan_maxtime;
            if (plan_maxtime === '' || isNaN(plan_maxtime) || (plan_maxtime != 0 && plan_maxtime < 30)) {
                this.errorMessage('最大时间必须大于等于30秒');
                return;
            }
            let plan_maxcount = this.alarm_plan_current.plan_maxcount;
            if (plan_maxcount === '' || isNaN(plan_maxcount) || plan_maxcount < 0) {
                this.errorMessage('最大次数必须大于等于0');
                return;
            }
            let plan_rangetime = this.alarm_plan_current.plan_rangetime;
            if (plan_rangetime === '' || isNaN(plan_rangetime) || plan_rangetime < 30) {
                this.errorMessage('时间范围必须大于等于30秒');
                return;
            }
            let plan_begintime = this.alarm_plan_current.plan_time[0];
            let plan_endtime = this.alarm_plan_current.plan_time[1];
            let client_ids = [];
            for (let i = 0; i < this.selected_clients.length; i++) {
                client_ids.push(this.selected_clients[i].client_id);
            }

            this.$http.post('/add_batch_alarm_plan', { 
                client_ids: client_ids,
                plan_name: plan_name,
                plan_email: this.alarm_plan_current.plan_email == true ? 1 : 0,
                plan_sms: this.alarm_plan_current.plan_sms == true ? 1 : 0,
                plan_enable: this.alarm_plan_current.plan_enable == true ? 1 : 0,
                plan_maxtime: plan_maxtime,
                plan_maxcount: plan_maxcount,
                plan_rangetime: plan_rangetime,
                plan_begintime: plan_begintime,
                plan_endtime: plan_endtime,
                plan_template: this.alarm_plan_current.plan_template,
            }).then(res => {
                if (res.status === 'ok') {
                    this.$Message.success(`成功批量添加 ${res.data} 条告警计划`);
                    this.batch_alarm_plan_add_modal = false;
                }else {
                    this.errorMessage(res.data);
                }
            }).catch(err => {
                this.errorMessage(err);
            });
        },
        handleAlarmPlanAddBatchCancel() {
            this.batch_alarm_plan_add_modal = false;
        },
    }
}
</script>